<template>
	<div class="readtype">
		<v-header :back-display="true" :path="path">
			<div slot="title">语法训练</div>
		</v-header>

		<div class="title">
			<p>选择题目类型</p>
		</div>
		<div class="box" v-show="show">
			<div class="box-con">
				<v-selected
					label="题库分类"
					placeholder="点击选择题库"
					v-model="topic"
					:columns="columns1"
					:option="{label:'name',value:'id'}"
					@confirm="confirm1"
				></v-selected>
				<v-selected
					label="目标分类"
					placeholder="点击选择目标"
					v-model="target"
					:columns="columns2"
					:disabled="isdisabled2"
					:option="{label:'name',value:'id'}"
					@confirm="confirm2"
				></v-selected>
				<v-selected
					label="题型分类"
					placeholder="点击选择题型"
					v-model="subject"
					:columns="columns3"
					:disabled="isdisabled3"
					:option="{label:'name',value:'id'}"
					@confirm="confirm3"
				></v-selected>
				<div class="clearfix btn">
					<van-button type="info" @click="toTrain('lgs')">进入训练</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import header from '@/components/main/header'
import selected from '@/components/content/selected'
import { Field, Button, Toast } from 'vant'
import api from '../../../api/api'

export default {
	name: 'Grammartype',
	components: {
		'v-header': header,
		'v-selected': selected,
		[Field.name]: Field,
		[Button.name]: Button,
		[Toast.name]: Toast,
	},
	data() {
		return {
			path: 'home',
			show: false,
			roleId: '', //用户登录的角色id
			isdisabled2: true, //目标分类是否禁用
			isdisabled3: true, //题型分类是否禁用
			topic: '', // 题库默认选中的索引值
			columns1: [], // 如果可选数据不是label-value,需要配置下option
			target: '', // 目标默认选中的值
			columns2: [],
			subject: '', // 题型默认选中的值
			columns3: [],
			formlist: {
				// 进入训练传入一个对象
				topic: '',
				target: '',
				subject: '',
				teacherid: '',
			},
		}
	},
	created() {
		this.getTopic()
		this.roleId = this.$route.params.roleid //用户登录的角色id
		console.log('3', this.roleId)
	},
	computed: {},
	methods: {
		// 获取三级联动
		getTopic() {
			Toast.loading({ message: '加载中...', forbidClick: true })
			api
				.Read()
				.then((res) => {
					Toast.clear()
					this.show = true
					console.log('one', res)
					this.columns1 = res.result
				})
				.catch((error) => {
					console.log(error)
				})
		},

		// 题库分类
		confirm1(data1, index, id) {
			// tips 正常获取值，用不到这个方法，用v-model获取值即可，这个方法是告诉你，可以获取任何你想要的数据
			// data1 当前这一条的obj数据
			// index 当前选择的索引
			// id 当前这一条数据的 value:id
			this.isdisabled2 = false
			this.isdisabled3 = true
			// 题库分类的内容
			this.formlist.topic = this.columns1[index].name
			console.log(data1, '当前索引1:', index, '当前id1:', id)
			api
				.Readtwo(id)
				.then((res) => {
					console.log('two', res)
					// 数组对象赋值
					this.columns2 = res.result
				})
				.catch((error) => {
					console.log(error)
				})
		},

		// 目标分类
		confirm2(data1, index, id) {
			this.isdisabled3 = false
			// 目标分类的内容
			this.formlist.target = this.columns2[index].name
			console.log(data1, '当前索引2:', index, '当前id2:', id)
			api
				.Readthree(id)
				.then((res) => {
					console.log('three', res)
					// 数组对象赋值
					this.columns3 = res.result
				})
				.catch((error) => {
					console.log(error)
				})
		},

		// 题型分类
		confirm3(data1, index, id) {
			// 题型分类的内容
			this.formlist.subject = this.columns3[index].name
			console.log(data1, '当前索引3:', index, '当前id3:', id)
			this.formlist.teacherid = id
		},

		// 进入训练
		toTrain(type) {
			if (!this.formlist.topic) {
				Toast('请选择题库分类')
			} else if (!this.formlist.target) {
				Toast('请选择目标分类')
			} else if (!this.formlist.subject) {
				Toast('请选择题型分类')
			} else {
				console.log('1', this.formlist.teacherid)
				console.log('2', type)
				api
					.Entrance(this.formlist.teacherid, type)
					.then((res) => {
						console.log('four', res)
						console.log(res.result)
						if (!res) {
							Toast('该分类无题目')
						} else {
							this.$router.push({
								path: '/vocabularying',
								query: { teacherid: this.formlist.teacherid, type: type, roleid: this.roleId },
							})
						}
					})
					.catch((error) => {
						console.log(error)
					})
				console.log('提交三级联动', this.formlist)
				switch (this.formlist.subject) {
					case '深度阅读':
						this.$router.push({ path: '/deepread' })
						break
					case '选词填空':
						this.$router.push({ path: '/choosefill' })
						break
					case '阅读匹配':
						this.$router.push({ path: '/readmatch' })
						break
					case '阅读简答':
						this.$router.push({ path: '/readanswer' })
						break
					case '阅读填空':
						this.$router.push({ path: '/readfill' })
						break
					case '段落匹配':
						this.$router.push({ path: '/sectionmatch' })
						break
				}
			}
		},
	},
	mounted() {},
}
</script>

<style lang="less" scoped>
.title {
	padding: 15px;
	p {
		color: #333;
		font-size: 16px;
	}
}
.box {
	margin: 0 15px;
	border: 1px dashed #bbbbbb;
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	.box-con {
		padding: 10px 0 45px;
	}
}
.btn {
	padding-right: 16px;
	padding-top: 20px;
}
.van-button--info {
	background-color: #ff8333;
	border-color: #ff8333;
	font-size: 13px;
	float: right;
	height: 32px;
	line-height: 32px;
}
</style>
